<template>
  <div class="app-container">
    <el-row :gutter="20" >
      <el-col :span="5">
        <pointList v-on:handlePointClick="handlePointClick"></pointList>
      </el-col>
      <!--历史数据-->
      <el-col :span="19">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="时间">
            <el-date-picker
              v-model="dateRange"
              :clearable="false"
              :editable="false"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>

        <div style="height: 300px;">

          <div style="float: left;margin-left: 5px;">
            <span v-if="pointParamList.length==0">该站点无数据参数</span>

            <div style="margin-left: 5px;width: 1000px;" :style="{width:dtWidth+'px'}">
              <el-scrollbar style="width: 100%;">
                <div :style="{width: pointParamList.length*130+'px',height:'26px'}">
                  <el-checkbox-group v-model="checkList"  >
                    <div v-for="pointParam in pointParamList" style="float: left;width: 130px;">
                      <el-checkbox :key="pointParam.id" :label="pointParam.paramId"
                      >{{pointParam.paramInfo.name}}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </el-scrollbar>
            </div>
            <!--<el-checkbox-group v-model="checkList"  >
              <el-checkbox
                v-for="pointParam in pointParamList"
                :key="pointParam.id"
                :label="pointParam.paramId"
              >{{pointParam.paramInfo.name}}</el-checkbox>
            </el-checkbox-group>-->
          </div>
          <div style="clear: both;" v-if="pointParamList.length>0 && loadingChart">
            <line-chart :chart-data="chartDataObj" :clear="clear" :height="'280px'"/>
          </div>

        </div>

        <el-table v-loading="loading" :stripe="true" :data="hisMainList" :max-height="tabHt" v-show="pointParamList.length>0">
          <el-table-column width="180" :label="`时　间`" align="center" prop="collecTimes" />
          <el-table-column min-width="120"
                           v-for="pointParam in pointParamList"
                           :key="pointParam.id"
                           :label="pointParam.paramInfo.name+`\n`+pointParam.paramInfo.unit"
                           :prop="`param${(pointParam.paramId)}`"
                           align="center">
            <template v-slot="scope">
              <span v-html="scope.row[`param${(pointParam.paramId)}`]"></span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0 && pointParamList.length>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { listPointParam } from "@/api/basic/pointParam";
  import { listHisMain,queryMoreParam,exportHisMain } from "@/api/basic/hisMain";
  import pointList from "@/views/components/pointTreeList";
  import LineChart from "./LineChart";

  const chartDataObj = {
    xAxisData: [],//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    yAxis:{},
    legendData: [],//['aa', 'bb'],
    series:[],/*[{
      name: 'aa', itemStyle: {
        normal: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        }
      },
      smooth: true,
      type: 'line',
      data: [100, 120, 161, 134, 105, 160, 165],
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
      {
        name: 'bb',
        smooth: true,
        type: 'line',
        itemStyle: {
          normal: {
            color: '#3888fa',
            lineStyle: {
              color: '#3888fa',
              width: 2
            },
            areaStyle: {
              color: '#f3f8ff'
            }
          }
        },
        data: [120, 82, 91, 154, 162, 140, 145],
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      }]*/
  }

  export default {
    name: "HisMain",
    components: { pointList,LineChart },
    data() {
      return {
        loadingChart:false,
        flag:true,
        dtWidth:1000,
        chartDataObj:chartDataObj,
        checkList:[],
        clear:true,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        pointParamList: [],
        // 实时数据主表表格数据
        hisMainList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        pointId : undefined,
        // 日期范围
        dateRange: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          pointId: undefined
        },
        queryParamsParam: {
          pageNum: 1,
          pageSize: 20,
          pointId: undefined,
          paramType: 'num'
        },
        key:null,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    watch: {
      checkList(val){
        this.getMoreParam();
      }
    },
    computed: {
      tabHt(){
        return this.$store.state.app.tableHeight.ht - 350
      }
    },
    mounted() {
      let nowDate = new Date();
      let befDate = new Date(nowDate.getTime() + 1 * 24 * 3600 * 1000);
      let byear = befDate.getFullYear();
      let bmonth = befDate.getMonth() + 1;
      let bday = befDate.getDate();
      let endTime = `${byear}-${bmonth}-${bday}`;
      // 向前推迟一周的时间点
      befDate = new Date(nowDate.getTime() - 1 * 24 * 3600 * 1000);
      byear = befDate.getFullYear();
      bmonth = befDate.getMonth() + 1;
      bday = befDate.getDate();
      let startTime = `${byear}-${bmonth}-${bday}`;
      this.dateRange = [startTime,endTime];
    },
    created() {

    },
    methods: {
      getList(){
        this.loading = true;
        listHisMain(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.hisMainList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handlePointClick(obj){
        this.loadingChart = false;
        this.queryParams.pointId=obj.pointId;
        this.queryParamsParam.pointId=obj.pointId;
        this.getPointParam();
      },
      /** 查询站点参数关联列表 */
      getPointParam() {
        let that = this;
        this.checkList = [];
        listPointParam(this.queryParamsParam).then(response => {
          this.pointParamList = response.rows;
          this.pointParamList.forEach(function (pointParam,i) {
            if(i<4){
              that.checkList.push(pointParam.paramId);
            }
          })
          if(this.flag){
            this.dtWidth = this.dtWidth-1;
            this.flag = false;
          }else{
            this.dtWidth = this.dtWidth+1;
            this.flag = true;
          }
          // this.getMoreParam();
          this.getList();
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getMoreParam();
        this.getList();
      },
      getMoreParam() {
        let _this=this
        if(this.checkList.length==0){
          this.chartDataObj.xAxisData = []
          this.chartDataObj.yAxis = []
          this.chartDataObj.series = []
          this.chartDataObj.legendData = []
          return;
        }
        this.queryParams.paramIds = this.checkList.join(',');
        queryMoreParam(this.addDateRange(this.queryParams, this.dateRange)).then(obj => {
          this.chartDataObj.xAxisData = []
          this.chartDataObj.yAxis = []
          this.chartDataObj.series = []
          this.chartDataObj.legendData = []
          let valsMap = obj.valsMap;
          let legendDataArr = obj.legendData;
          let paramIds = obj.paramIds;
          _this.chartDataObj.xAxisData = obj.xAxisData;
          paramIds.forEach(function(paramId,i) {
            let valsData = valsMap[paramId];
            _this.chartDataObj.yAxis.push({
              show : false,
              name: legendDataArr[i],
              type: "value",
              // position: "right",
              //splitNumber: 10, // Y 轴分隔格数
              // offset:i*30,
              axisLabel:{       //y轴
                show:false
              },
              axisLine:{       //y轴
                show:false
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              splitLine: {
                // Y 轴分隔线样式
                show: true,
                lineStyle: {
                  //color: ["#f3f0f0"],
                  width: 2,
                  type: "solid"
                }
              },
              scale: true
            });
            _this.chartDataObj.series.push({
              name: legendDataArr[i],
              // smooth: true,
              type: 'line',
              yAxisIndex: i,
              itemStyle: {
                normal: {
                  // color: '#3888fa',
                  lineStyle: {
                    // color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              data: valsData
            });
          });
          _this.chartDataObj.legendData=legendDataArr;
          _this.loadingChart = true;
        });

      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.addDateRange(this.queryParams, this.dateRange);
        this.$confirm('是否确认导出数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportHisMain(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },

    }
  };
</script>
  <style scoped lang="scss">

    ::v-deep {
      .el-scrollbar__bar.is-horizontal {
        height: 8px;
        left: 2px;
      }
    }

  </style>
